<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>考试成绩</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/exam.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<header class="header">
	<a class="left_icon back_btn"></a>
	<h4 class="title">考试成绩</h4>
</header>

<div class="swiper-container bg-w Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children" id="examRes">
				
				<template v-if="type == null">
					<ul class="res-0 flex-row">
						<li class="timeCot h5 flex-full">考试用时：<span class="time">00:05:29</span></li>
						<li class="infoCot h6 tr">
							排名: 暂无排名<br />
							考试完成人数10/50
						</li>
					</ul>
					<div class="scoreMod">
						<div class="scoreCot">
							<canvas id="myCanvas" width="180" height="180"></canvas>
							<span class="val">{{score}}</span>
							<span class="unit">分</span>
						</div>
					</div>
					
					
				</template>
				
				<template v-else>
					<ul class="res-1 flex-row">
						<li class="timeCot h5 flex-full">考试用时：<span class="time">00:05:29</span></li>
						<li class="infoCot h6 tr">
							排名: 7<br />
							<span style="color: #888;">考试完成人数50/50</span>
						</li>
					</ul>
					<div class="scoreRes">
						<ul class="box">
							<li class="val">{{score}}</li>
							<li class="unit">分</li>
							<li class="success" v-if="type == 0">
								<img src="image/exam/res-success.png" />
							</li>
							<li class="fail" v-if="type == 1">
								<img src="image/exam/res-fail.png" />
							</li>
						</ul>
					</div>
				</template>
				
				<div class="countMod flex-row">
					<dl class="flex-row flex-top flex-full" @click="skipUrl" data-url="examView.html">
						<dt class="icon"><img src="image/exam/test-1.png" /></dt>
						<dd class="txt">
							<h5 class="bt">回顾试卷</h5>
							<h6 class="cot">正确80题，错误20题</h6>
						</dd>
					</dl>
					<dl class="flex-row flex-top flex-full" @click="skipUrl" data-url="examEval.html">
						<dt class="icon"><img src="image/exam/test-2.png" /></dt>
						<dd class="txt">
							<h5 class="bt">查看评测</h5>
							<h6 class="cot">正确80题，错误20题</h6>
						</dd>
					</dl>
				</div>
				
				<a class="examStartBtn tc" @click="refreshRes" v-if="type == null">刷新结果</a>
				<a class="examStartBtn tc">返回学习中心</a>
				
			</div>
			
		</div>
	</div>
</div>

<script type="text/javascript">

var vm = new Vue({
	el:"#Main",
	data:{
		type:null,
		score:86,
	},
	methods:{
		//生成分数圈
		setScore:function(){
			var that = this;
			
			if(that.type != null){
				return false;
			};
			
			var canvas = document.getElementById('myCanvas');
			var org = {
				w:canvas.width,
				h:canvas.height
			};
			var ctx = canvas.getContext('2d');
			var val = 0;
			this.createScore(val,ctx,org);
			
			var time = setInterval(function(){
				if(val < that.score){
					val++;
					that.createScore(val,ctx,org);
				}else{
					clearInterval(time);
				};
			},12);
		},
		//生成分数动画
		createScore:function(val,ctx,org){
			ctx.clearRect(0,0,org.w,org.h);
			var rate = val / 100 ;
			
			ctx.beginPath();
			ctx.strokeStyle='#3794cf';
			ctx.lineWidth=14;
			ctx.arc(org.w/2,org.h/2,org.w/2-8,3*Math.PI/4,Math.PI/4);
			ctx.stroke();
			
			ctx.beginPath();
			ctx.lineCap='round';
			ctx.lineWidth=8;
			ctx.strokeStyle="#fff";
			ctx.arc(org.w/2,org.h/2,org.w/2-8,3*Math.PI/4,(3*Math.PI/4)+(5*Math.PI/4)*rate);
			ctx.stroke();
		},
		//刷新结果
		refreshRes:function(){
			//模拟
			var num = Math.random();
			this.type = Math.round(num);
		},
		//跳转页面
		skipUrl:function(e){
			var target = e.currentTarget;
			var url    = target.getAttribute('data-url');
			location.href = url;
		},
	},
	mounted:function(){
		this.setScore();
		pullSwiper('#Main');
	},
});

</script>

</body>
</html>
